﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>问答社区</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link href="/css/question/style.css" rel="stylesheet" type="text/css"/>
    <script src="/js/tab.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>


</head>
<body style="height: auto">

<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
        <a href="/mine/profiles.html" class="aui-navBar-item">
            <i class="fa fa-angle-left fa-2x"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">问答</span>
        </div>
        <div class="aui-center">
            <a href="/mine/questionEdit.html">
                <i class="fa fa-coffee" style="color: #FFFFFF">我要提问</i>
            </a>
        </div>
    </header>
    <section class="aui-scrollView">

        <div class="aui-tab" data-ydui-tab>
            <ul class="tab-nav b-line">
                <li class="tab-nav-item tab-active" data-pile="pile1">
                    <a href="javascript:;">
                        <span>全部问答</span>
                    </a>
                </li>
                <li class="tab-nav-item" data-pile="pile2" data-orderby="createTime desc">
                    <a href="javascript:;">
                        <span>最新问答</span>
                    </a>
                </li>
                <li class="tab-nav-item" data-state="1" data-pile="pile3">
                    <a href="javascript:;">
                        <span>待回答问题</span>
                    </a>
                </li>
            </ul>
            <div class="tab-panel">
                <div class="tab-panel-item tab-active">
                    <div class="divHeight"></div>
                    <div class="aui-slide-body" id="pile1">
                    </div>
                </div>
                <div class="tab-panel-item">
                    <div class="divHeight"></div>
                    <div class="aui-slide-body" id="pile2">
                    </div>
                </div>
                <div class="tab-panel-item">
                    <div class="divHeight"></div>
                    <div class="aui-slide-body" id="pile3">
                    </div>
                </div>
            </div>
        </div>

    </section>
</section>

<script>
    var state;
    var orderby;
    var id = "pile1";
    var currentPage = 1;
    var totalPage;


    function goPage() {
        $.get("/questions", {"state": state, "orderBy": orderby, "currentPage": currentPage}, function (data) {
            var html = '';
            $.each(data.list, function (index, ele) {
                html += '<a href="/mine/answer.html?id=' + ele.id + '" class="aui-slide-body-item">' +
                    '<h2>' + ele.title + '</h2>' +
                    '<p>' + ele.detail + '</p>' +
                    '<div class="aui-flex">' +
                    '<div class="aui-flex-box">' +
                    '<img src="' + ele.user.headImgUrl + '"class="rounded-circle" width="10%"/>' +
                    '<span>' + ele.user.nickName + '</span>' + '&nbsp;<span style="color: deeppink">' + ele.stateName + '</span>' +
                    '</div>' +
                    '<div class="aui-slide-info">' +
                    '<span>' +
                    '<i class="fa fa-eye"></i>&nbsp;' + ele.viewCount +
                    '</span>' +
                    '</div>' +
                    '</div>' +
                    '</a>' +
                    '<div class="divHeight"></div>'
            })
            $("#" + id).html(html);
            currentPage += 1;
            totalPage = data.pages;
        }, "json")
    }


    // $(function () {
    //点击页签时进行查询
    $(".tab-nav-item").click(function () {
        currentPage = 1;
        state = $(this).data("state");
        orderby = $(this).data("orderby");
        id = $(this).data("pile");
        goPage();

    });
    //页面加载时加查询数据
    goPage();


    //监视屏幕滚动，到达页尾开始翻页
    $(window).scroll(function () {
        if ($(window).height() + $(window).scrollTop() >= $(document).height()) {
            //防止无限翻页
            if (currentPage <= totalPage) {
                console.log("翻页");
                //加载第二页的数据
                $.get("/questions", {"state": state, "orderBy": orderby, "currentPage": currentPage}, function (data) {
                    var html = '';
                    $.each(data.list, function (index, ele) {
                        html += '<a href="/mine/answer.html?id=' + ele.id + '" class="aui-slide-body-item">' +
                            '<h2>' + ele.title + '</h2>' +
                            '<p>' + ele.detail + '</p>' +
                            '<div class="aui-flex">' +
                            '<div class="aui-flex-box">' +
                            '<img src="' + ele.user.headImgUrl + '"class="rounded-circle" width="10%"/>' +
                            '<span>' + ele.user.nickName + '</span>' + '&nbsp;<span style="color: deeppink">' + ele.stateName + '</span>' +
                            '</div>' +
                            '<div class="aui-slide-info">' +
                            '<span>' +
                            '<i class="fa fa-eye"></i>&nbsp;' + ele.viewCount +
                            '</span>' +
                            '</div>' +
                            '</div>' +
                            '</a>' +
                            '<div class="divHeight"></div>'
                    })
                    $("#" + id).append(html);
                    currentPage += 1;
                    totalPage = data.pages;
                }, "json")
            }
        }
        //数据加载完毕，停止翻页
        if ($(window).height() + $(window).scrollTop() >= $(document).height() & currentPage > totalPage) {
            $(document).dialog({
                type: 'notice',
                infoText: '到底了哟~',
                autoClose: 2500,
                position: 'bottom'  // center: 居中; bottom: 底部
            });
        }
    })

    // })
</script>
</body>

</html>
